<template>
	<view class="content">
		<view class="banner">
			<swiper circular autoplay interval=3000>
				<swiper-item v-for="(item,index) in imgList" :key="index" @click="imgTap(item.url)">
					<image :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="tips" v-if='titles'>
			<uni-notice-bar :num="num" :speed="speed" showGetMore="true" showIcon="true"
				style="width: 750rpx;padding: 30rpx  20rpx 10rpx 20rpx;" :single="true" :scrollable="true"
				:text="titles" @getmore="tomore"></uni-notice-bar> 
		</view>
		<view class="func-box">
			<view class="func-item" v-for="(item,index) in fucList" :key="index" @tap="funcClick(item.url,index)">
				<image :src='item.img' mode=""></image>
				<view class="func-item-right">
					<view class="func-item-title">{{item.title}}
						<text v-if="index==1&&timeoutNum>0" class="msg">
							<template v-if="timeoutNum>99">
								99+
							</template>
							<template v-else>
								{{timeoutNum}}
							</template>
						</text>
					</view>
					<view class="func-item-detile">{{item.detile}}</view>
				</view>
			</view>
		</view>
		<view class="openChech" v-if="open">
			<view class="openTitle">选择你要检查的设备</view>
			<view class="openRideo">
				<view class="rideoBox" v-for="(item,index) in rideoList" :key="index">
					<label class="rideo" @click="rideoChange(index)" :value="item">
						<radio style="transform:scale(0.7)" :checked="current == index" :value="item" />
						<view class="rideoText">{{item}}</view>
					</label>

				</view>
				<view class="rideoBtn">
					<view class="btn1" @click="open = false">取消</view>
					<view class="btn2" @click="openOk">确认</view>
				</view>
			</view>
		</view>
		<view class="openZhe" v-if="open"></view>
		<u-tabbar v-model="currents" :list="list" active-color='#003690' :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				index: 0,
				userinfo: {},
				value: '', //搜索关键词
				installList: [], //安装列表
				dosearch: false,
				showAcount: false,
				page: 1,
				fucList: [{
						img: '/static/homeicon/yhsb.png',
						title: '隐患上报',
						detile: '发现隐患及时上报',
						url: '../securityCheck/dangerReport?type=' + 1
					}, {
						img: '/static/homeicon/yh.png',
						title: '隐患处理',
						detile: '可实时查看隐患及处理',
						url: '../../pagesA/danger/danger'
					}, {
						img: '/static/homeicon/jc.png',
						title: '安检工作',
						detile: '定期进行安全检查工作',
						url: '../rithcheck/ritycheck'
					}, {
						img: '/static/homeicon/sbjc.png',
						title: '设备检查',
						detile: '定期进行设备检查',
						url: '../IMEICheck/IMEICheck'
					},
					{
						img: '/static/homeicon/yygd.png',
						title: '预约工单',
						detile: '用户的预约检查',
						url: '../yuyueOrder/index'
					},
					{
						img: '/static/homeicon/qiang.png',
						title: '设备抢修',
						detile: '设备抢修精准导航',
						url: '../repair/index'
					},
					{
						img: '/static/homeicon/gl.png',
						title: '用户查询',
						detile: '用户信息查询渠道',
						url: '../query/query'
					},
					{
						img: '/static/homeicon/xgzl.png',
						title: '相关资料',
						detile: '日常所需小工具',
						url: '../../pagesD/index/index'
					},
					{
						img: '/static/homeicon/qiba.png',
						title: '气表板块',
						detile: '更换、清零、抄表',
						url: '../gasMeter/gasMeter?'
					},
					{
						img: '/static/homeicon/genzong.png',
						title: '第三方施工跟踪',
						detile: '管理跟踪第三方施工监护',
						url: '../track/trackList'
					}
				],
				rideoList: ['调压箱检查', '阀门检查'],
				open: false,
				current: 0,
				name: '',
				num: 0,
				titles: [],
				speed: '',
				imgList: [],
				token: '',
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						isDot: false,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				currents: 0,
				timeoutNum: 0,
				villageList: [], //消息
				isUnread: [] // 未读消息
			};
		},
		onLoad() {
			this.userinfo = this.user;
		},
		onShow() {

			if (uni.getStorageSync('token')) {
				this.getExceeddangerNum()
				uni.getStorage({
					key: 'token'
				}).then(da => {
					this.token = da[1].data
				})
				setTimeout(() => {
					this.getInstallDetail()
				}, 10)
			} else {
				uni.reLaunch({
					url: '../login/login'
				})
			}
			// 员工角色消息
			// this.getList()
			// this.notification()
			
			// console.log('this.isUnread',this.isUnread);
		},

		methods: {
			getExceeddangerNum() {
				let that = this
				uni.request({
					url: that.$api + 'danger/exceeddanger_count',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.timeoutNum = res.data.data
						}
					}
				})
			},
			tomore() {
				uni.navigateTo({
					url: '/pages/news/newslist/newslist'
				})
			},
			rideoChange(e) {
				this.current = e
			},
			beforeSwitch(index) {
				console.log(index)
				if (index == 1) {
					uni.redirectTo({
						url: '/pagesB/user/me'
					})
				}

			},
			imgTap(url) {
				url && uni.navigateTo({
					url: '/pages/webview/webview?url=' + url
				})
			},
			openOk() {
				this.open = false
				if (this.current == 0) {
					var type = 2
					uni.navigateTo({
						url: '../IMEICheck/IMEICheck?type=' + type
					});
				} else {
					var type = 1
					uni.navigateTo({
						url: '../IMEICheck/IMEICheck?type=' + type
					});
				}
			},
			funcClick(url, index) {
				// if(index == 3){
				// 	this.open = true;
				// 	return;
				// }
				this.$navTo(url)
			},
			searchFocus() {
				this.showAcount = false
			},
			infoClick() {
				this.showAcount = !this.showAcount
			},
			// 退出登录
			logOut() {
				uni.clearStorage({
					key: 'logininfo',
					success: () => {
						this.showAcount = false
						uni.redirectTo({
							url: '../../login/login'
						})
					}
				})
			},
			// 跳转至记录页面
			toJiLu() {
				uni.navigateTo({
					url: './jilu'
				})
			},
			// 跳转用户信息页面
			toCaiLiao(id) {
				uni.navigateTo({
					url: '../userinfo/uninstall?id=' + id
				})
			},
			// 点击获取安装数据
			searchUser(val) {
				// this.getInstallDetail ()
				this.dosearch = true
				uni.navigateTo({
					url: '../query/query?key=' + val
				})
			},
			// 获取安装数据
			getInstallDetail() {
				let that = this
				uni.request({
					url: this.$url + 'common.banner/getList',
					method: 'POST',
					data: {
						token: that.token
					},
					success: (res) => {
						that.imgList = res.data.data
					}
				})
				this.num = 0
				uni.request({
					url: this.$url + 'common.notice/getList',
					method: 'POST',
					header: {
						token: that.token
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.titles = []
							that.num += res.data.data.count
							that.speed = res.data.data.speed
							that.titles.push(res.data.data.list[0].title + res.data.data.list[0]
								.createtime_text)
								console.log(that.titles)
						}

					}
				})
				uni.request({
					url: this.$url + 'notification.notification/getLists',
					method: 'POST',
					header: {
						token: that.token
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.num += res.data.data.count
						}
					}
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.uni-noticebar[data-v-24a05de4] {
		margin-bottom: 0;
	}

	page {
		background-color: #F1F1F1;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}

	.content {
		padding-bottom: 140rpx;
	}

	.banner {
		width: 100%;
		height: 400rpx;

		swiper {
			width: 750rpx;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.tips {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #777;
		background-color: #fff;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
	}

	.func-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #fff;
		margin-top: 20rpx;

		.func-item {
			display: flex;
			justify-content: center;
			width: 50%;
			padding: 30rpx 0;

			image {
				width: 50rpx;
				height: 60rpx;
				margin: 0 12rpx 0 50rpx;
			}

			.func-item-right {
				width: 65%;
			}

			.func-item-title {
				font-size: 32rpx;
				line-height: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				margin-bottom: 5px;
				display: flex;
				align-items: center;

				.msg {
					padding: 0 10rpx;
					border-radius: 50rpx;
					border: 1rpx solid red;
					color: red;
					margin-left: 10rpx;
				}
			}

			.func-item-detile {
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: left;
				color: #777;
				text-overflow: hidden;
			}
		}
	}

	.openChech {
		width: 460rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0 auto;
		z-index: 999;

		.openTitle {
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(#003690 98%, #001b48 2%);
			border-radius: 8px 8px 0 0;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			box-sizing: border-box;
		}

		.openRideo {
			background-color: #fff;
			border-radius: 0 0 8px 8px;
			padding-bottom: 42rpx;
			padding-top: 32rpx;

			.rideoBox {
				display: flex;
			}

			.rideo {
				margin-right: 10rpx;
				margin-left: 100rpx;
				margin-bottom: 24rpx;
				display: flex;
			}

			.rideoBtn {
				width: 100%;
				display: flex;
				justify-content: space-around;

				.btn1 {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #bbbbbb;
					border-radius: 6rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
				}

				.btn2 {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #003388;
					border-radius: 6rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
				}
			}
		}

	}

	.openZhe {
		background-color: #3B3B3B;
		opacity: 0.49;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}
</style>
